<template>
  <div class="connect">
    <div class="connect_box">
        <el-form :inline="true"   :model="selectForm" class="demo-form-inline">
          <el-form-item :label="$t('Order_module.UserName')">
              <el-input v-model="selectForm.name" :placeholder="$t('Order_module.UserName') "></el-input>
          </el-form-item>
          <el-form-item :label="$t('Order_module.cell_phone_num')">
              <el-input v-model="selectForm.phone" :placeholder="$t('Order_module.cell_phone_num') "></el-input>
          </el-form-item>
          <el-button type="primary" @click="getList">{{$t('public.query')}}</el-button>
        </el-form>
        <el-button type="primary" style="border: none;" @click="AddressClose" >{{$t('Order_module.increase')}}</el-button>
        <el-button style="background-color: orangered;border: none;" type="primary" @click="delete_all" >{{$t('public.Batch_Delete')}}</el-button>
        <div style="margin-bottom: 10px;"></div>
        <el-table
            ref="multipleTable"
            :data="tableData"
             border
            tooltip-effect="dark"
            @selection-change="handleSelectionChange">
            <el-table-column
              type="selection"
              width="55">
            </el-table-column>
            <!-- 姓名 -->
            <el-table-column min-width="150px" prop="name" :label="$t('Order_module.UserName')" align="center" ></el-table-column>
            <!-- 公司名称 -->
            <!-- <el-table-column min-width="120px" prop="companyName" :label="$t('Order_module.name')" align="center" ></el-table-column> -->
            <!-- 电话 -->
            <el-table-column min-width="180px" prop="phone" :label="$t('Order_module.cell_phone_num')" align="center" ></el-table-column>
            <!-- 国家 -->
            <!-- <el-table-column min-width="120px" prop="countryName" :label="$t('Order_module.country_distinguish')" align="center" ></el-table-column> -->
            <!-- 省 -->
            <el-table-column min-width="100px" prop="province" :label="$t('Order_module.economize_z')" align="center" ></el-table-column>
            <!-- 市 -->
            <el-table-column min-width="100px" prop="city" :label="$t('Order_module.city')" align="center" ></el-table-column>
            <!-- 区 -->
            <el-table-column min-width="100px" prop="county" :label="$t('Order_module.distinguish__x')" align="center" ></el-table-column>
            <!-- 详细地址 -->
            <el-table-column min-width="200px" prop="address" :label="$t('Order_module.Address')" align="center" ></el-table-column>
            <!-- 邮政编码 -->
            <el-table-column min-width="120px" prop="zipCode" :label="$t('Order_module.Postal_Code')" align="center" ></el-table-column>
            <!-- 默认地址 -->
            <el-table-column min-width="120px" prop="zipCode" :label="$t('public.Default_Address')" align="center" >
              <template slot-scope="{row}">
                <el-switch
                  v-model="row.selected"
                  active-color="#13ce66"
                  @change="switchChange($event , row)"
                  inactive-color="#ff4949">
                </el-switch>
              </template>
            </el-table-column>
            <!-- 操作 -->
            <el-table-column fixed="right" min-width="120px" prop="zipCode" :label="$t('public.operate')" align="center" >
              <template slot-scope="{row}">
                  <el-button @click="getInfo(row)" type="text">{{$t('public.modify')}}</el-button>
                  <el-popconfirm
                    @confirm="deleteaddress(row)"
                    :confirm-button-text="$t('public.determine')"
                    :cancel-button-text="$t('public.cancellation')"
                    :title="$t('public.Are_you_sure_about_this_operation')"
                  >
                  <el-button type="text" style="color: red;"  slot="reference" size="small">{{$t('public.delete') }}</el-button>
                  </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page"
            :page-sizes="[10, 50, 100, 200]"
            :page-size="limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
          <el-dialog
            :title="dialogTitle"
            :visible.sync="addAddressShow"
            width="50%"
            :before-close="AddressClose">
            <el-form   :model="submitForm" :rules="submitRules" ref="submitForm" label-width="100px" class="demo-ruleForm">
              <el-form-item :label="$t('Order_module.UserName')" prop="name">
                <!-- 姓名 -->
                <el-input type="text" show-word-limit maxlength="20" :placeholder="$t('Order_module.UserName')" v-model="submitForm.name"></el-input>
              </el-form-item>
              <el-form-item :label="$t('Order_module.economize_z')" prop="province">
                <!-- 省 -->
                <el-input type="text" show-word-limit maxlength="20"  :placeholder="$t('Order_module.economize_z')" v-model="submitForm.province"></el-input>
              </el-form-item>
              <el-form-item :label="$t('Order_module.city')" prop="city">
                <!-- 市 -->
                <el-input type="text" show-word-limit maxlength="30" :placeholder="$t('Order_module.city')" v-model="submitForm.city"></el-input>
              </el-form-item>
              <el-form-item :label="$t('Order_module.distinguish__x')" prop="county">
                <!-- 区 -->
                <el-input type="text" show-word-limit maxlength="30" :placeholder="$t('Order_module.distinguish__x')" v-model="submitForm.county"></el-input>
              </el-form-item>
              <el-form-item :label="$t('Order_module.Address')" prop="address">
                <!-- 详细地址 -->
                <el-input show-word-limit maxlength="125" :placeholder="$t('Order_module.Address')" v-model="submitForm.address"></el-input>
              </el-form-item>
              <el-form-item :label="$t('Order_module.cell_phone_num')" prop="phone">
                <!-- 电话 -->
                <el-input show-word-limit maxlength="20" @input="(e)=>{submitForm.phone = e.replace(/[^0-9 -]/g,'')}" :placeholder="$t('Order_module.cell_phone_num')" v-model="submitForm.phone"></el-input>
              </el-form-item>
              <el-form-item :label="$t('Order_module.Postal_Code')" prop="zipCode">
                <!-- 邮编 -->
                <el-input show-word-limit maxlength="10" :placeholder="$t('Order_module.Postal_Code')" v-model="submitForm.zipCode"></el-input>
              </el-form-item>
              <el-form-item :label="$t('public.Default_Address')" prop="zipCode">
                <!-- 默认地址 -->
                <el-switch v-model="submitForm.selected" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
              </el-form-item>
              <el-form-item  :label="$t('Order_module.Address_Resolution')" >
                <!-- 地址解析 -->

                <el-input v-model="submitForm.allAddress" :placeholder="$t('Order_module.Address_Resolution')" style="width:100%;" type="textarea" ></el-input>
                <el-button style="margin-top: 10px;" @click="jiexi(submitForm.allAddress)">{{$t('Order_module.Address_Resolution')}}</el-button>
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button @click="addAddressShow = false">{{$t('public.cancellation')}}</el-button>
              <el-button type="primary" :loading="addressLoading" @click="submit('submitForm')">{{$t('public.determine')}}</el-button>
            </span>
          </el-dialog>
    </div>
  </div>
</template>

<script>
  import {
    address_list,
    address_save,
    address_info,
    address_update,
    address_delete,
    address_modifySelected
  } from '@/api/wqzApi'
  import AddressParse,{AREA, Utils} from 'address-parse';
  import store from '@/store'

  export default {
    components: {
      },
    data() {
      return {
        addressLoading:false,
        selectIDs:[], //选中的id集
        dialogTitle:this.$t('public.New_Address'),
        addressType:null,//1新增地址0编辑地址
        submitRules:{
          name:[
            { required: true, message: this.$t('public.Enter'), trigger: 'blur' },
          ],
          companyName:[
            { required: true, message: this.$t('public.Enter'), trigger: 'blur' },
          ],
          countryId:[
            { required: true, message: this.$t('public.Enter'), trigger: 'blur' },
          ],
          province:[
            { required: true, message: this.$t('public.Enter'), trigger: 'blur' },
          ],
          city:[
            { required: true, message: this.$t('public.Enter'), trigger: 'blur' },
          ],
          county:[
            { required: true, message: this.$t('public.Enter'), trigger: 'blur' },
          ],
          address:[
            { required: true, message: this.$t('public.Enter'), trigger: 'blur' },
          ],
          phone:[
            { required: true, message: this.$t('public.Enter'), trigger: 'blur' },
            { min: 6, max: 20, message: this.$t('public.Please_enter_the_correct_number'), trigger: 'blur' }
          ],
          zipCode:[
            { required: true, message: this.$t('public.Enter'), trigger: 'blur' },
          ],
        },
        options:[
          {label:'国家1' , value:1},
          {label:'国家2' , value:2},
          {label:'国家3' , value:3},
        ],
        userInfo:store.getters.userInfo,
        selectForm:{
          name:'',
          phone:''
        },
        submitForm:{
            userId:null,
            name:null,
            phone:null,
            countryId:null,
            address:'',
            province:null,
            city:null,
            county:null,
            zipCode:null,
            companyName:null,
            selected:false,
            allAddress:''
        },
        addAddressShow:false,
        page:1,
        limit:10,
        total:0,
        tableData:[]
      }
    },

    created() {
    },
    mounted() {
      this.getList()
    },
    destroyed() {

    },
    methods: {
      jiexi(text){
        if(text==''){
           this.$message(this.$t('Order_module.Content_cannot_be_empty'));
           return
        }
        var result = AddressParse.parse(text)[0];
        this.submitForm.name = result.name
        this.submitForm.phone = result.mobile
        this.submitForm.province = result.province
        this.submitForm.city = result.city
        this.submitForm.county = result.area
        this.submitForm.zipCode = result.zip_code
        this.submitForm.address = result.province+result.city+result.area+result.details
      },
      switchChange(e , item){
        console.log(e , item)
        var data = {
          selected:e,
          id:item.id
        }
        address_modifySelected(data).then(res=>{
          console.log(res , '返回信息')
          this.$message({
            type:'success',
            message:this.$t('public.Operation_successful')
          })
          this.getList()
        })
      },
      deleteaddress(row){
        console.log(row)
       var data = [row.id]
        address_delete(data).then(res=>{
          this.$message({
            type:'success',
            message:this.$t('public.Operation_successful')
          })
          this.getList()
        })

        // 地址删除
      },
      getInfo(row){
        // 获取地址详情
        console.log(row)
        address_info({id :row.id}).then(res=>{
          console.log(res)
          this.dialogTitle = this.$t('public.edit_address')
          this.addressType = 0
          this.submitForm = res.commonAddress
          this.addAddressShow = true

        })
      },
      submit(formName){
        // 添加地址

         this.$refs[formName].validate((valid) => {
           this.addressLoading = true
           if (valid) {
             if(this.addressType==1){
               // 新增地址
               address_save(this.submitForm).then(res=>{
                  this.$message({
                    type:'success',
                    message:this.$t('public.Operation_successful')
                  })
                  this.addressLoading = false

                  this.addAddressShow = !this.addAddressShow
                  this.getList()
               }).catch(err=>{
                 this.addressLoading = false
               })
             }else{
               // 编辑地址
               address_update(this.submitForm).then(res=>{
                  this.$message({
                    type:'success',
                    message:this.$t('public.Operation_successful')
                  })
                  this.addressLoading = false
                  this.addAddressShow = !this.addAddressShow
                  this.getList()
               }).catch(err=>{
                 this.addressLoading = false
               })

             }

           } else {
             console.log('error submit!!');
             return false;
           }
         });
      },
      AddressClose(){
        // 关闭对话框
        this.submitForm={
            userId:null,
            name:null,
            phone:null,
            countryId:null,
            province:null,
            city:null,
            county:null,
            zipCode:null,
            companyName:null,
            selected:false,
        }
        this.dialogTitle = this.$t('public.New_Address')
        this.addressType = 1
        this.addAddressShow = !this.addAddressShow
      },
      getList(){
        var data = {
          page:this.page,
          limit:this.limit
          ,...this.selectForm
        }
        console.log(data)
          address_list(data).then(res=>{
            this.tableData = res.page.list
            this.total = res.page.totalCount
          })
      },
      handleSelectionChange(e){
        // 列表多选
        console.log(e)
        var arr = []
        e.forEach((item,index)=>{
          arr.push(item.id)
        })
        this.selectIDs = arr
      },
      delete_all(){
        // 批量删除
        if(this.selectIDs.length <=0){
          this.$message({
            type:'error',
            message:this.$t('public.Please_select')
          })
        }else{
          address_delete(this.selectIDs).then(res=>{
            this.$message({
              type:'success',
              message:this.$t('public.Operation_successful')
            })
            this.getList()
          })

        }

      },
      handleSizeChange(e){
        this.limit = e
        this.getList()
      },
      handleCurrentChange(e){
        this.page = e
        this.getList()
      },
    }
  }
</script>

<style scoped>
  .connect_box{
    padding: 1%;
    background-color: #fff;
  }
</style>
